<template>
  <div class="Leftmenu">
    <a-layout id="components-layout-demo-custom-trigger">
      <a-layout-sider
        :trigger="null"
        collapsible
        v-model="collapsed"
        width="14%"
        :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }"
      >
        <div class="logo">
          <img src="../assets/logo@2x.png">
          代理商后台管理系统
          </div>
        <a-menu theme="dark" mode="inline" :defaultSelectedKeys="['1']">
          <a-menu-item key="1">
            
            <span>
              <img src="../assets/首页@2x.png">
              <router-link to="/home">首页</router-link>
            </span>
          </a-menu-item>
          <a-sub-menu key="sub1">
            <span slot="title">
            <a-icon type="calendar" />
              <span>订单管理</span>
            </span>
            <a-menu-item key="2">
              <span>
                  <a-icon type="file-text" />
                 <router-link to="/home/orderadmin/sellorder">销售订单</router-link>
              </span>
             
            </a-menu-item>
            <a-menu-item key="3">
              <span>
                  <a-icon type="copy" />
                <router-link to="/home/orderadmin/aftersaleindent">售后订单</router-link>
              </span>
            </a-menu-item>
            <a-menu-item key="4">
              <span>
                 <a-icon type="exception" />
                 <router-link to="/home/orderadmin/abnormalorders">异常订单</router-link>
              </span>
           </a-menu-item>
          </a-sub-menu>

          <a-sub-menu key="sub7">
            <span slot="title">
              <img src="../assets/库存管理@2x.png">
              <span>库存管理</span>
            </span>
            <a-menu-item key="26">
              <router-link to="/home/repertoryadmin/repertoryinquire">库存查询</router-link>
            </a-menu-item>
            <a-menu-item key="27">
              <router-link to="/home/repertoryadmin/updowngoods">上下货记录</router-link>
            </a-menu-item>
            <a-menu-item key="28">
              <router-link to="/home/repertoryadmin/repairinvoice">补货单</router-link>
            </a-menu-item>
            <a-menu-item key="29">
              <router-link to="/home/repertoryadmin/backinvoice">回货单</router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub4">
            <span slot="title">
              <a-icon type="table" />
              <span>数据分析</span>
            </span>
            <a-menu-item key="15">门店销量</a-menu-item>
            <a-menu-item key="16">点位销量</a-menu-item>
            <a-menu-item key="17">品类销量</a-menu-item>
            <a-menu-item key="32">商户分成</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <span slot="title">
              <a-icon type="table" />
              <span>商品管理</span>
            </span>
            <a-menu-item key="6">
              <router-link to="/home/goodsadmin/allgoods">商品库</router-link>
            </a-menu-item>
            <a-menu-item key="7">
              <router-link to="/home/goodsadmin/templateadmin">模板管理</router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub3">
            <span slot="title">
              <a-icon type="table" />
              <span>网点管理</span>
            </span>
            <a-menu-item key="12">
              <router-link to="/home/networkadmin/networkadminson">网点管理</router-link>
            </a-menu-item>
            <a-menu-item key="13">
              <router-link to="/home/networkadmin/poitionadmin">点位管理</router-link>
            </a-menu-item>
            <a-menu-item key="14">
              <router-link to="/home/networkadmin/mydevice">我的设备</router-link>
            </a-menu-item>
            <a-menu-item key="8">
              <router-link to="/home/networkadmin/inspectoradmin">巡柜员管理</router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub5">
            <span slot="title">
              <a-icon type="table" />
              <span>财务管理</span>
            </span>
            <a-menu-item key="19">
              <router-link to="/home/financeadmin/residualadmin">余额管理</router-link>
            </a-menu-item>
            <a-menu-item key="20">
              <router-link to="/home/financeadmin/withdrawadmin">提现管理</router-link>
            </a-menu-item>
            <a-menu-item key="21">
              <router-link to="/home/financeadmin/mybill">我的账单</router-link>
            </a-menu-item>
          </a-sub-menu>

          <a-sub-menu key="sub8">
            <span slot="title">
              <a-icon type="table" />
              <span>合作方管理</span>
            </span>
            <a-menu-item key="9">
              <router-link to="/home/partneradmin/partneradminson">合作方管理</router-link>
            </a-menu-item>
            <a-menu-item key="10">
              <router-link to="/home/partneradmin/balancecollect">合作方余额汇总</router-link>
            </a-menu-item>
            <a-menu-item key="30">
              <router-link to="/home/partneradmin/withdraw">合作方提现</router-link>
            </a-menu-item>
            <a-menu-item key="31">
              <router-link to="/home/partneradmin/partnerBill">合作方账单</router-link>
            </a-menu-item>
          </a-sub-menu>

          <a-menu-item key="22">
            <a-icon type="table" />
            <span>
              <router-link to="/home/containerlog">货柜日志</router-link>
            </span>
          </a-menu-item>

          <a-sub-menu key="sub6">
            <span slot="title">
              <a-icon type="table" />
              <span>权限管理</span>
            </span>
            <a-menu-item key="23">
              <router-link to="/home/accessadmin/peopleadmin">人员管理</router-link>
            </a-menu-item>
            <a-menu-item key="24">
              <router-link to="/home/accessadmin/roleadmin">角色管理</router-link>
            </a-menu-item>
          </a-sub-menu>

          <a-sub-menu key="sub9">
            <span slot="title">
              <a-icon type="table" />
              <span>用户反馈</span>
            </span>
            <a-menu-item key="25">
              <router-link to="/home/userFeedback/userservice">用户报修</router-link>
            </a-menu-item>
          </a-sub-menu>

          <a-menu-item key="26">
            <a-icon type="table" />
            <span>
              <router-link to="/home/accountManagement/manage">账户管理</router-link>
            </span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout :style="{ marginLeft: '14%' }">
        <main :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
          <a-layout>
            <a-layout-header>
              <a-row :gutter="0">
                <a-col :span="5">
                  <a-icon
                    class="trigger"
                    :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                    @click="()=> collapsed = !collapsed"
                  />
                  <a-icon type="appstore" style="font-size:20px;" />
                </a-col>
                <a-col :span="15" style="text-align:right;padding-right:2%">
                  <a-icon type="search" style="font-size:20px;padding:0 24px" />
                  <a-icon type="question-circle" style="font-size:20px;" />
                  <a-icon type="bell" style="font-size:20px;padding:0 24px" />
                  <a-dropdown class="logout" :trigger="['click']">
                    <a class="ant-dropdown-link" href="#">
                      <a-avatar :size="25" icon="user" :src="this.$store.state.photoImg" />
                      <span style="padding:0 8px">{{this.$store.state.nickname}}</span>
                      <a-icon type="down" />
                    </a>
                    <a-menu slot="overlay" @visibleChange="visibleChange">
                      <a-menu-item key="1" @click="logout">
                        <router-link to="/login">
                          <a href="javascript:;" class="logout">
                            <a-icon type="logout" />
                            <span>退出登录</span>
                          </a>
                        </router-link>
                      </a-menu-item>
                    </a-menu>
                  </a-dropdown>
                </a-col>
              </a-row>
            </a-layout-header>
            <a-layout class="navigation">
              <a-breadcrumb separator="/" :routes="routes"></a-breadcrumb>
            </a-layout>
          </a-layout>
        </main>
        <br />
        <a-layout class="content">
          <router-view></router-view>
        </a-layout>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
export default {
  name: "Leftmenu",
  data() {
    const { lang } = this.$route.params;
    return {
      collapsed: false,
      routes: [
        {
          path: "home",
          breadcrumbName: "首页"
        }
      ],
      visible: false
    };
  },
  methods: {
    visibleChange(visible) {
      console.log(visible);
    },
    // 退出登录
    logout() {
      this.axios
        .post(this.baseUrl + "/agentBackend/logout", {
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          // console.log(response);
          if (response.data.code == 0) {
            this.$store.state.loginToken = "";
          }
        });
    }
  },
  watch: {
    $route: function(to, from) {
      if (to.path == "/home") {
        this.routes.splice(1, 3);
      }
      if (to.path == "/home/orderadmin/sellorder") {
        this.routes.splice(
          1,
          3,
          { path: "orderadmin", breadcrumbName: "订单管理" },
          { path: "sellorder", breadcrumbName: "销售订单" }
        );
      }
      if (to.path == "/home/orderadmin/aftersaleindent") {
        this.routes.splice(
          1,
          3,
          { path: "orderadmin", breadcrumbName: "订单管理" },
          { path: "aftersaleindent", breadcrumbName: "售后订单" }
        );
      }
      if (to.path == "/home/orderadmin/abnormalorders") {
        this.routes.splice(
          1,
          3,
          { path: "orderadmin", breadcrumbName: "订单管理" },
          { path: "abnormalorders", breadcrumbName: "异常订单" }
        );
      }
      if (to.path == "/home/orderadmin/sellorder/selldetails") {
        this.routes.splice(
          1,
          3,
          { path: "orderadmin", breadcrumbName: "订单管理" },
          { path: "sellorder", breadcrumbName: "销售订单" },
          { path: "selldetails", breadcrumbName: "销售订单详情" }
        );
      }
      if (to.path == "/home/orderadmin/aftersaleindent/aftersaledetails") {
        this.routes.splice(
          1,
          3,
          { path: "orderadmin", breadcrumbName: "订单管理" },
          { path: "aftersaleindent", breadcrumbName: "售后订单" },
          { path: "aftersaledetails", breadcrumbName: "售后订单详情" }
        );
      }
      if (to.path == "/home/orderadmin/abnormalorders/abnormaldetails") {
        this.routes.splice(
          1,
          3,
          { path: "orderadmin", breadcrumbName: "订单管理" },
          { path: "abnormalorders", breadcrumbName: "异常订单" },
          { path: "abnormaldetails", breadcrumbName: "异常订单详情" }
        );
      }
      if (to.path == "/home/repertoryadmin/repertoryinquire") {
        this.routes.splice(
          1,
          3,
          { path: "repertoryadmin", breadcrumbName: "库存管理" },
          { path: "repertoryinquire", breadcrumbName: "库存查询" }
        );
      }
      if (to.path == "/home/repertoryadmin/updowngoods") {
        this.routes.splice(
          1,
          3,
          { path: "repertoryadmin", breadcrumbName: "库存管理" },
          { path: "updowngoods", breadcrumbName: "上下货记录" }
        );
      }
      //补货单的路由分隔
      if (to.path == "/home/repertoryadmin/repairinvoice") {
        this.routes.splice(
          1,
          3,
          { path: "repertoryadmin", breadcrumbName: "库存管理" },
          { path: "Repairinvoice", breadcrumbName: "补货单" }
        );
      }
      //补货单的路由分隔

      //补货单详情路由分隔
      if (to.path == "/home/repertoryadmin/repairinvoice/createrepaire") {
        this.routes.splice(
          1,
          3,
          { path: "repertoryadmin", breadcrumbName: "库存管理" },
          { path: "repairinvoice", breadcrumbName: "补货单" },
          { path: "createrepaire", breadcrumbName: "补货单详情" }
        );
      }
      //补货单创建
      if (to.path == "/home/repertoryadmin/repairinvoice/realcreat") {
        this.routes.splice(
          1,
          3,
          { path: "repertoryadmin", breadcrumbName: "库存管理" },
          { path: "repairinvoice", breadcrumbName: "补货单" },
          { path: "realcreat", breadcrumbName: "补货单创建" }
        );
      }

      if (to.path == "/home/repertoryadmin/backinvoice/editinvoice") {
        this.routes.splice(
          1,
          3,
          { path: "repertoryadmin", breadcrumbName: "库存管理" },
          { path: "backinvoice", breadcrumbName: "回货单" },
          { path: "realcreat", breadcrumbName: "回货单编辑" }
        );
      }

      //回货单的路由分隔
      if (to.path == "/home/repertoryadmin/backinvoice") {
        this.routes.splice(
          1,
          3,
          { path: "repertoryadmin", breadcrumbName: "库存管理" },
          { path: "backinvoice", breadcrumbName: "回货单" }
        );
      }

      if (to.path == "/home/repertoryadmin/backinvoice/detailinvoice") {
        this.routes.splice(
          1,
          3,
          { path: "repertoryadmin", breadcrumbName: "库存管理" },
          { path: "backinvoice", breadcrumbName: "回货单" },
          { path: "detailinvoice", breadcrumbName: "回货单详情" }
        );
      }
      //回货单详情的路由分隔

      //回货单编辑的路由分隔

      //回货单编辑的路由分隔
      if (to.path == "/home/goodsadmin/allgoods") {
        this.routes.splice(
          1,
          3,
          { path: "goodsadmin", breadcrumbName: "商品管理" },
          { path: "allgoods", breadcrumbName: "商品库" }
        );
      }
      if (to.path == "/home/goodsadmin/templateadmin") {
        this.routes.splice(
          1,
          3,
          { path: "goodsadmin", breadcrumbName: "商品管理" },
          { path: "templateadmin", breadcrumbName: "模板管理" }
        );
      }
      if (to.path == "/home/goodsadmin/templateadmin/templateadd") {
        this.routes.splice(
          1,
          3,
          { path: "goodsadmin", breadcrumbName: "商品管理" },
          { path: "templateadmin", breadcrumbName: "模板管理" },
          { path: "templateadd", breadcrumbName: "新增模板" }
        );
      }
      if (to.path == "/home/goodsadmin/templateadmin/templateedit") {
        this.routes.splice(
          1,
          3,
          { path: "goodsadmin", breadcrumbName: "商品管理" },
          { path: "templateadmin", breadcrumbName: "模板管理" },
          { path: "templateedit", breadcrumbName: "模板编辑" }
        );
      }
      if (to.path == "/home/networkadmin/networkadminson") {
        this.routes.splice(
          1,
          3,
          { path: "networkadmin", breadcrumbName: "网点管理" },
          { path: "networkadminson", breadcrumbName: "网点管理" }
        );
      }
      if (to.path == "/home/networkadmin/poitionadmin") {
        this.routes.splice(
          1,
          3,
          { path: "networkadmin", breadcrumbName: "网点管理" },
          { path: "poitionadmin", breadcrumbName: "点位管理" }
        );
      }
      if (to.path == "/home/networkadmin/poitionadmin") {
        this.routes.splice(
          1,
          3,
          { path: "networkadmin", breadcrumbName: "网点管理" },
          { path: "poitionadmin", breadcrumbName: "点位管理" }
        );
      }
      if (to.path == "/home/networkadmin/poitionadmin/poitionadd") {
        this.routes.splice(
          1,
          3,
          { path: "networkadmin", breadcrumbName: "网点管理" },
          { path: "poitionadmin", breadcrumbName: "点位管理" },
          { path: "poitionadd", breadcrumbName: "新增点位" }
        );
      }
      if (to.path == "/home/networkadmin/poitionadmin/poitionedit") {
        this.routes.splice(
          1,
          3,
          { path: "networkadmin", breadcrumbName: "网点管理" },
          { path: "poitionadmin", breadcrumbName: "点位管理" },
          { path: "poitionedit", breadcrumbName: "编辑点位" }
        );
      }
      if (to.path == "/home/networkadmin/mydevice") {
        this.routes.splice(
          1,
          3,
          { path: "networkadmin", breadcrumbName: "网点管理" },
          { path: "mydevice", breadcrumbName: "我的设备" }
        );
      }
      if (to.path == "/home/networkadmin/inspectoradmin") {
        this.routes.splice(
          1,
          3,
          { path: "networkadmin", breadcrumbName: "网点管理" },
          { path: "inspectoradmin", breadcrumbName: "巡柜员管理" }
        );
      }
      if (to.path == "/home/partneradmin/partneradminson") {
        this.routes.splice(
          1,
          3,
          { path: "partneradmin", breadcrumbName: "合作方管理" },
          { path: "partneradminson", breadcrumbName: "合作方管理" }
        );
      }
      if (to.path == "/home/partneradmin/balancecollect") {
        this.routes.splice(
          1,
          3,
          { path: "partneradmin", breadcrumbName: "合作方管理" },
          { path: "balancecollect", breadcrumbName: "合作方余额汇总" }
        );
      }
      if (to.path == "/home/partneradmin/withdraw") {
        this.routes.splice(
          1,
          3,
          { path: "partneradmin", breadcrumbName: "合作方管理" },
          { path: "withdraw", breadcrumbName: "合作方提现" }
        );
      }
      if (to.path == "/home/partneradmin/partnerBill") {
        this.routes.splice(
          1,
          2,
          { path: "partneradmin", breadcrumbName: "合作方管理" },
          { path: "partnerBill", breadcrumbName: "合作方账单" }
        );
      }

      if (to.path == "/home/stockinquiry") {
        this.routes.splice(1, 3, {
          path: "stockinquiry",
          breadcrumbName: "库存查询"
        });
      }
      if (to.path == "/home/agentadmin") {
        this.routes.splice(1, 3, {
          path: "agentadmin",
          breadcrumbName: "代理商管理"
        });
      }
      if (to.path == "/home/containerlog") {
        this.routes.splice(1, 3, {
          path: "containerlog",
          breadcrumbName: "货柜日志"
        });
      }
      if (to.path == "/home/financeadmin/residualadmin") {
        this.routes.splice(
          1,
          3,
          { path: "financeadmin", breadcrumbName: "财务管理" },
          { path: "residualadmin", breadcrumbName: "余额管理" }
        );
      }
      if (to.path == "/home/accessadmin/peopleadmin") {
        this.routes.splice(
          1,
          3,
          { path: "accessadmin", breadcrumbName: "权限管理" },
          { path: "peopleadmin", breadcrumbName: "人员管理" }
        );
      }
      if (to.path == "/home/accessadmin/roleadmin") {
        this.routes.splice(
          1,
          3,
          { path: "accessadmin", breadcrumbName: "权限管理" },
          { path: "roleadmin", breadcrumbName: "角色管理" }
        );
      }

      if (to.path == "/home/userFeedback/userservice") {
        this.routes.splice(
          1,
          3,
          { path: "userFeedback", breadcrumbName: "用户反馈" },
          { path: "userservice", breadcrumbName: "用户报修" }
        );
      }
      if (to.path == "/home/accessadmin/peopleadmin") {
        this.routes.splice(
          1,
          3,
          { path: "accessadmin", breadcrumbName: "权限管理" },
          { path: "peopleadmin", breadcrumbName: "人员管理" }
        );
      }
      if (to.path == "/home/accessadmin/roleadmin") {
        this.routes.splice(
          1,
          3,
          { path: "accessadmin", breadcrumbName: "权限管理" },
          { path: "roleadmin", breadcrumbName: "角色管理" }
        );
      }
      if (to.path == "/home/accessadmin/roleadmin/roleadd") {
        this.routes.splice(
          1,
          3,
          { path: "accessadmin", breadcrumbName: "权限管理" },
          { path: "roleadmin", breadcrumbName: "角色管理" },
          { path: "roleadd", breadcrumbName: "新增角色" }
        );
      }
      if (to.path == "/home/accessadmin/roleadmin/roleedit") {
        this.routes.splice(
          1,
          3,
          { path: "accessadmin", breadcrumbName: "权限管理" },
          { path: "roleadmin", breadcrumbName: "角色管理" },
          { path: "roleedit", breadcrumbName: "编辑角色" }
        );
      }
    }
  },
  mounted: function() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.Leftmenu {
  height: 100%;
}
.ant-layout-header {
  background: #fff;
  padding: 0;
  border-bottom: 1px solid rgb(242, 242, 242);
}
.navigation {
  width: 100%;
}
.content {
  padding: 115px 24px 50px 24px;
}
.ant-breadcrumb {
  background: white;
  height: 50px;
  line-height: 50px;
  padding-left: 30px;
}
.ant-breadcrumb-link a {
  color: rgba(0, 0, 0, 0.65);
}
#components-layout-demo-custom-trigger {
  height: 100%;
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 65px;
  line-height: 65px;
  width: 100%;
  color: white;
  font-size: 1.1rem;
  text-align: center;
  background: rgb(0, 40, 77);
}
a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
}
.logout {
  color: black
  };
 .ant-menu-submenu  span img{
   margin-bottom:1%; margin-right:4%
 }
 .ant-menu-item span img{
    margin-bottom:1%; margin-right:4%
 }
 .ant-menu-submenu-title span img{
  margin-bottom:1%; margin-right:4%
 }
  
</style>
